<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div {width: 50px; height: 100px; background-color: red;margin-top:20px;border: 1px solid #000;}
	</style>
	<script type="text/javascript">
	window.onload = function () {
		var aDiv = document.getElementsByTagName('div');

		for (var i = 0; i < aDiv.length; i++) {
			aDiv[i].onmouseover = function (){
				doMove( this,'width', 500 )
			}

			aDiv[i].onmouseout = function (){
				doMove( this, 'width',50 )
			}
		};
	}

	function doMove(obj, attr, target){
		clearInterval(obj.timer);

		obj.timer = setInterval(function (){
			var iCur = parseInt(getStyle(obj, attr));
			var iSpeed = (target - iCur)/10;
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

			obj.style[attr] = iCur + iSpeed + 'px';

			if ( iCur == target ) {
				clearInterval(obj.timer)
			}
		},30)
	}

	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
	</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>